<template>
  <div class="menu-wrapper">
    <el-scrollbar style="height: 100%">
      <el-menu v-bind="$attrs" v-on="$listeners">
        <al-menu-item
          v-for="i in menuList.filter((val) => val.path)"
          :key="i.path"
          :item="i"
          :index="i.path"
        >
          <template v-slot:menuItem="i">
            <slot name="menuItem" :row="i.row">
              {{ i.row.name }}
            </slot>
          </template>
          <template v-slot:submenu="i">
             <slot name="submenu" :row="i.row">
              {{ i.row.name }}
            </slot>
          </template>
        </al-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import AlMenuItem from "./AlMenuItem";
export default {
  name: "AlMenu",
  components: { AlMenuItem },
  props: {
    menuList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style scoped>
.menu-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

::v-deep .el-menu--horizontal > .menu-item-wrapper {
  display: inline;
}

::v-deep .el-menu--horizontal .el-menu-item {
  display: inline;
}

</style>
